<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="vue.js"></script>
<body>
    <div id="app">
        <h1>{{msg}}</h1>
        <h2 v-bind:class="className">类型绑定</h2>
    </div>

    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                msg:'helloVue',
                className:'redBg'
            },
            beforeCreate:function(){
                console.log('beforeCreate');
                console.log(this);
                console.log(this.msg);
                console.log(this.cilckEvent);
                // Vue刚实例化,此时数据data和事件方法methods还未绑定vm对象上
                // beforeCreate这个钩子函数可以做ajax请求，对数据进行绑定
            
            },
            created(){
                console.log('created');
                // 数据data和方法methods绑定到vm对象上
                // 还没渲染到视图上
                console.log(this);
                console.log(this.msg);
                console.log(this.cilckEvent);
            },
            beforeMount(){
                console.log('beforeMount');
                // 渲染之前,根据数据生成的DOM对象是获取不到的
                var dom = document.querySelector('.redBg');
                console.log(dom); //null
            },
            mounted(){
                console.log('mounted');
                // 渲染之后
                var dom = document.querySelector('.redBg');
                console.log(dom);
            },
            beforeUpdate() {
                // 数据更改，但内容未更改之前
                console.log('beforeUpdate');
            },
            updated:function(){
                // 内容已更新完毕
                console.log('updated');
            },
            beforeDestroy() {
                // 应用销毁之前
                console.log('beforeDestory');
            },
            destroyed() {
                // 应用销毁之后
                console.log('destoryed');
            },

            methods:{
                cilckEvent(){
                    console.log('点击事件');
                }
            }
        })

    </script>
</body>
</html>